<template>
<!--component/empty.wxml-->
<view class="noData">
  <image class="active" :style="'width: 224rpx; height: 188rpx; margin-top: ' + marginTop + 'rpx;'" src="/static/common/icon_loading.png"></image>
  <view class="title">加载中...</view>
</view>
</template>

<script>

export default {
  name:"loading",
  data() {
    return {};
  },

  components: {},
  props: {
    message: String,
    marginTop: {
      type: Number,
      default: 0
    }
  },
  methods: {}
};
</script>
<style>
.noData {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
}

.noData .title {
  font-size: 24rpx;
  color: #B8C2BD;
  font-weight: normal;
  margin: 10rpx 0 0 0;
}

.noData .action {
  background-color: #00ED9F;
  margin-top: 10rpx;
  color: #FFF;
  font-size: 24rpx;
  padding: 3rpx 20rpx;
  border-radius: 10rpx;
}

.active {
  animation: weuiLoading 0.6s steps(12, end) infinite;
}

@keyframes weuiLoading {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}
</style>